<template>
  <div class="memeory-bg correct-wrong">
    <Header :isTransBg="true" :width="1000" :isGoBack="false">
      <template v-slot:left>
        <span class="weight-title"
          >{{ checkedBookData.edition_name }}-{{
            checkedBookData.grade_name
          }}</span
        >
      </template>
      <template v-slot:right>
        <div class="close-memeory" @click="goStudyCenter">
          关闭
          <img class="ml5" src="@/assets/img/close-circle.png" alt="" />
        </div>
      </template>
    </Header>
    <div class="memory-container w1000">
      <div class="memory-question">
        <div class="question-container">
          <div class="memory-header">
            错题订正
            <span
              v-if="wordData.questionType == 4 || wordData.questionType == 5"
              class="fr reminder-text"
              >完成单词输入后，按"Enter"进入下一题</span
            >
          </div>
          <Correct
            :wordData="wordData"
            @nextWord="nextIntensiveWord(intensiveWordIndex + 1)"
          ></Correct>
          <div class="correct-bottom">
            <div class="total-num">
              <span>{{ intensiveWordIndex + 1 }} </span>
              /{{ intensiveWordList.length }}道题
            </div>
            <div class="total-pagination">
              <!-- <div
                class="left click"
                @click="nextIntensiveWord(intensiveWordIndex - 1)"
              >
                <i class="el-icon-arrow-left"></i>
              </div> -->
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                class="left click"
                @click="nextIntensiveWord(intensiveWordIndex - 1)"
                :disabled="intensiveWordIndex == 0"
              ></el-button>
              <div class="checked-item-box">
                <ul
                  class="checked-item"
                  :style="
                    `left:${intensiveWordIndex *
                      -30}px;width:${intensiveWordList.length * 30}px`
                  "
                >
                  <li
                    class="click"
                    :class="intensiveWordIndex == index ? 'is-checked' : ''"
                    v-for="(item, index) in intensiveWordList"
                    :key="index"
                    @click="nextIntensiveWord(index)"
                  >
                    {{ index + 1 }}
                  </li>
                </ul>
              </div>

              <!-- <div
                class="right click"
                @click="nextIntensiveWord(intensiveWordIndex + 1)"
              >
                <i class="el-icon-arrow-right"></i>
              </div> -->
              <el-button
                type="primary"
                icon="el-icon-arrow-right"
                class="right click"
                :disabled="intensiveWordIndex == intensiveWordList.length - 1"
                @click="nextIntensiveWord(intensiveWordIndex + 1)"
              ></el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Correct from "./Correct";
import { getWordDataById } from "@/api/index";
export default {
  data() {
    return {
      intensiveWordList: [],
      intensiveWordIndex: 0,
      wordData: {},
    };
  },
  methods: {
    goStudyCenter() {
      if (this.$route.query.backName) {
        this.$router.push({
          name: "naturalSpell",
        });
        return;
      }
      this.$router.push({
        name: "studyCenter",
      });
    },
    getQuestionList() {
      let res = JSON.parse(localStorage.getItem("paperRes"));
      let questionIdList = [];
      res.data.question_info_type_list.forEach((questionType) => {
        questionType.question_info_list.forEach((question) => {
          if (!question.is_true) {
            questionIdList.push({
              questionType: question.question_type,
              wordId: question.word_id,
            });
          }
        });
      });
      this.intensiveWordList = questionIdList;
      this.nextIntensiveWord(0);
    },
    nextIntensiveWord(value) {
      if (value < 0) {
        this.intensiveWordIndex = 0;
      } else if (value > this.intensiveWordList.length - 1) {
        this.intensiveWordIndex = this.intensiveWordList.length - 1;
      } else {
        this.intensiveWordIndex = value;
      }

      this.getWordDataById(this.intensiveWordList[this.intensiveWordIndex]);
    },
    getWordDataById(data) {
      getWordDataById(data.wordId).then((res) => {
        if (res.code == 200) {
          this.wordData = {
            wordName: res.data.word_name,
            paraphrase: res.data.paraphrase,
            questionType: data.questionType,
            phonetic:
              this.$store.getters.isBritish == 1
                ? res.data.phonetic_british
                : res.data.phonetic_american, //音标
            audioURL:
              this.$store.getters.isBritish == 1
                ? res.data.en_url
                : res.data.us_url, //音频
          };
        }
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getQuestionList();
  },
  components: {
    Correct,
    Header,
  },
};
</script>
